<template>
	<view class="content">
		<view class="head">
			<view>
				<image src="../../static/personal/logo.png" mode=""></image>
			</view>
			<view class="words">
				欢迎来到北窗青年
			</view>
			<view class="words">
				最懂互联网职场人的在线社区
			</view>
			<view class="words">
				快速完善真实资料&有趣的灵魂必相遇
			</view>
		</view>

		<view class="tabbar-box">
			<view :class="tabActive==1?'active':''" @click="chooseTabBar(1)">
				我已工作(含实习)
			</view>
			<view :class="tabActive==2?'active':''" @click="chooseTabBar(2)">
				我在上学
			</view>
		</view>

		<view>
			<view class="input-box">
				<view class="title">
					姓名
				</view>
				<view>
					<input type="text" placeholder="请如实填写姓名" placeholder-class="holderclass" v-model="atherInfo.realName" />
				</view>
			</view>
			<view class="input-box">
				<view class="title">
					学校
				</view>
				<view>
					<input type="text" placeholder="请填写所在学校" placeholder-class="holderclass" v-model="atherInfo.school" />
				</view>
			</view>
			<view class="input-box">
				<view class="title">
					意向岗位
				</view>
				<view>
					<input type="text" placeholder="请填写意向岗位" placeholder-class="holderclass" v-model="atherInfo.job" />
				</view>
			</view>
		</view>

		<view class="skip">
			<view @click="backToLastPage">
				跳过，信息下次补全
			</view>
			<image @click="backToLastPage" class="arrow" src="../../static/personal/arrow.png" mode=""></image>
		</view>

		<view class="submit-box">
			<view>
				注册即表示同意<text>《服务协议》</text>及<text>《隐私政策》</text>
			</view>
			<view>
				<button class="submit-btn" type="default" @click="submit">完成注册</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getData
	} from "../../sgapi/api.js"
	export default {
		data() {
			return {
				tabActive: 1, //选择的是哪一个
				atherInfo: {
					openid: "123456165",
					isStudent: 1,
					job: "",
					school: "",
					realName: ""
				}
			}
		},
		methods: {
			//选择自己的身份	
			chooseTabBar(index) {
				this.tabActive = index
			},

			// 提交用户信息
			submit() {
				uni.showLoading({
					title: "加载中"
				})
				this.sgAjax.getData("/user/userInfo", this.atherInfo).then(res => {
					uni.hideLoading()
					uni.showToast({
						title: "注册完成！",
						duration: 1500,
						mask: true,
						success: () => {
							uni.setStorageSync("userInfo", res.data)
							setTimeout(() => {
								uni.navigateBack(1)
							}, 1500)
						}
					})
				})
			},

			// 跳过后返回
			backToLastPage() {
				uni.navigateBack(1)
			}
		},
		watch: {
			tabActive(newv, oldv) {
				this.atherInfo.isStudent = newv - 1
			}
		}
	}
</script>

<style scoped>
	.content {
		padding: 0 30rpx;
		box-sizing: border-box;
	}

	.head {
		font-size: 28rpx;
		color: rgba(4, 3, 25, 0.6);
		text-align: center;
		line-height: 28rpx;
	}

	.head image {
		width: 60rpx;
		height: 60rpx;
	}

	.head .words {
		margin-top: 32rpx;
	}

	.tabbar-box {
		display: flex;
		justify-content: space-around;
	}

	.tabbar-box {
		margin: 74rpx 0;
	}

	.tabbar-box view {
		font-size: 28rpx;
		color: rgba(4, 3, 25, 0.4);
		line-height: 28rpx;
		display: inline-block;
		vertical-align: middle;
		line-height: 56rpx;
		padding: 0 15rpx;
	}


	.tabbar-box view.active {
		font-size: 32rpx;
		opacity: 1;
		color: #040319;
		background-image: url(../../static/job/switch_chos.png);
		background-size: 48rpx 15rpx;
		background-repeat: no-repeat;
		background-position: bottom right;
		font-weight: bold;
	}

	.input-box {
		border-bottom: 1rpx solid rgba(4, 3, 25, 0.1);
		padding: 39rpx 0;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
	}

	.input-box input {
		text-align: right;
	}

	.input-box .title {
		font-size: 32rpx;
		color: #040319;
		line-height: 32rpx;
		font-weight: bold;
	}

	.holderclass {
		font-size: 28rpx;
		color: rgba(4, 3, 25, 0.4);
		letter-spacing: 0;
		line-height: 28rpx;
	}

	.skip {
		font-size: 24rpx;
		color: rgba(4, 3, 25, 0.4);
		letter-spacing: 0;
		text-align: right;
		line-height: 24rpx;
		text-align: right;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		margin-top: 44rpx;
	}

	.arrow {
		vertical-align: middle;
		display: block;
		width: 24rpx;
		height: 48rpx;
		margin-left: 10rpx;
	}

	.submit-box {
		text-align: center;
		font-size: 24rpx;
		color: rgba(4, 3, 25, 0.4);
		letter-spacing: 0;
		line-height: 24rpx;
		position: fixed;
		width: 100%;
		padding-bottom: 48rpx;
		bottom: 0;
	}

	.submit-btn {
		background: #1B82FE;
		box-shadow: 0 8rpx 12rpx -2rpx rgba(0, 98, 216, 0.30);
		border-radius: 8rpx;
		border-radius: 8rpx;
		width: 368rpx;
		height: 80rpx;
		font-size: 32rpx;
		color: #FFFFFF;
		letter-spacing: 0;
		text-align: center;
		line-height: 80rpx;
		margin: auto;
	}

	.submit-box>view:first-child {
		margin-bottom: 32rpx;
	}

	.submit-box>view:first-child text {
		color: #1B82FE;
	}
</style>
